<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        dl {
            width: 18%;
            border: 1px solid #000;
            margin: 14px;
            float: left;
            text-align: center;
        }

        b {
            display: block;
            margin: 20px;
        }

        span {
            text-decoration: line-through;
        }

        i {
            color: red;
            font-style: normal;
        }

        dd {
            text-align: left;
            margin: 5px;
        }

        dl img {
            width: 100%;
        }
    </style>
</head>

<body>
    <h2>根据数据生成一个商品列表</h2>
    <button id="price">根据价格排序</button>
    <button id="sales">根据销量排序</button>
    <button id="evaluate">根据评价排序</button>
    <div id="box">
        <!-- <dl>
            <dt><img src="img/ip7.jpg"></dt>
            <b>iphone7 plugs001</b>
            <dd>原价：<span>5899.00</span></dd>
            <dd>现价：<i>￥5888.00</i></dd>
            <dd>颜色：土豪金</dd>
            <dd>评价：288</dd>
            <dd>销量：1230</dd>
        </dl> -->
    </div>
    <script>
        // 创建数组储存信息
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }]
        //  构造个生成手机信息函数list
        function list() {
            for (var i = 0; i < data.length; i++) {
                box.innerHTML += '<dl>' +
                    '<dt><img src=' + data[i].imgurl + '></dt>' +
                    '<b>' + data[i].name + '' + data[i].id + '</b>' +
                    '<dd>颜色：' + data[i].color + '</dd>' +
                    '<dd>原价：<span>' + data[i].price + '</span></dd>' +
                    '<dd>现价：<i>￥' + data[i].sale + '</i></dd>' +
                    '<dd>销量：' + data[i].sales + '</dd>' +
                    '<dd>评价：' + data[i].evaluate + '</dd>' +
                    '</dl>'
            }
        }
        //  初始化生成
        list()

        //  点击根据价格排序按钮对信息数组根据手机价格排序
        price.onclick = function() {
            box.innerHTML = ''
            data.sort(function(a, b) {
                return b.sale - a.sale
            })
            list()
        }

        //  点击根据销量排序按钮对信息数组根据手机销量排序
        sales.onclick = function() {
            box.innerHTML = ''
            data.sort(function(a, b) {
                return b.sales - a.sales
            })
            list()
        }

        //  点击根据评价排序按钮对信息数组根据手机评价排序
        evaluate.onclick = function() {
            box.innerHTML = ''
            data.sort(function(a, b) {
                return b.evaluate - a.evaluate
            })
            list()
        }
    </script>
</body>

</html>